<!-- 设备列表 -->
<template>
  <view class="container">
    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        设备总数
        <!-- <view class="headFilter" @click="show=true">
          <image src="@/static/manage/filter.png" class="filterPng" >
          筛选
        </view> -->
        <van-dropdown-menu active-color="#3C8AFF" custom-class="dorpdownClass" :use-before-toggle="true"
          @before-toggle="beforeToggle">
          <van-dropdown-item id="abilityRef" @change="beforeToggle('#abilityRef')" title="筛选" :value="queryParams.area">
            <view class="rowStyle">
              <view class="label">设备类型</view>
              <uni-data-select style="width: 100%;" v-model="queryParams.equType"
                :localdata="deviceTypeList"></uni-data-select>
            </view>
            <view class="rowStyle">
              <view class="label">设备名称</view>
              <input v-model="queryParams.equName" class="uni-input" focus placeholder="请输入"
                placeholder-style="color: #6a6a6a" />
            </view>
            <view class="rowStyle">
              <view class="label">关联终端</view>
              <uni-data-select v-model="queryParams.terminalId" style="width: 100%;"
                :localdata="terminalList"></uni-data-select>
            </view>
            <view class="rowStyle">
              <view class="label">编号</view>
              <input v-model="queryParams.equNo" class="uni-input" focus placeholder="请输入"
                placeholder-style="color: #6a6a6a" />
            </view>
            <view style="padding: 5px 16px;text-align: center;">
              <van-button @click="resetQueryParams" custom-style="width: 45%;margin-right: 20rpx" color="#3C8AFF" plain
                type="danger" round>
                清空
              </van-button>
              <van-button custom-style="width: 45%" color="#3C8AFF" type="danger" round @click="onConfirm">
                搜索
              </van-button>
            </view>
          </van-dropdown-item>
        </van-dropdown-menu>
      </u-sticky>

      <van-popup :show="show" position="top" custom-style="height: 20%;" :safe-area-inset-top="true" @close="onClose" />
      <view class="listContent-device">
        <uni-card v-for="item in deviceList" :key="item.equNo" margin="16rpx 32rpx"
          shadow="0rpx 3rpx 15rpx 0rpx rgba(0,14,17,0.04)" padding="0" :thumbnail="avatar">
          <template v-slot:title>
            <view class="terminalTitle">
              <view @click="toDeviceDetail(item)">
                <span class="headerIcon"></span>
                <text class="textTitle">{{item.equTypeName}}</text>
                <image v-if="item.impExp === 1" src="@/static/manage/in.png" class="impExpIcon"></image>
                <image v-if="item.impExp === 2" src="@/static/manage/out.png" class="impExpIcon"></image>
                <!-- <view :class="[
                  item.status_dictText === '在线' ? 'statusBgNormal' :
                  item.status_dictText === '离线' ? 'statusUnonline' :
                  item.status_dictText === '未激活' ? 'statusNoClick' :
                  item.status_dictText === '异常' ? 'statusBgAbnormal':'']" class="statusTag">{{item.status_dictText}}</view> -->
                <button type="primary" plain="true" size="mini"
                  style="border: 0;vertical-align: middle;height: 42rpx;line-height: 38rpx;font-size: 24rpx;color: #FFFFFF;background: #2769F7;border-radius: 6rpx;padding: 4rpx 18rpx">查看数据</button>
              </view>
              <view>
                <van-tag v-show="tag.value === item.onlintStatus" v-for="tag in statusList" :key="tag.value"
                  :color="tag.color" :text-color="tag.textColor">{{tag.label}}</van-tag>
              </view>
            </view>
          </template>
          <view class="uni-body">
            <view class="deviceInfo">
              <view>关联终端 <span class="deviceValue">{{ item.terminalName }} - {{ item.impExpName }}</span></view>
              <view>设备名称 <span class="deviceValue">{{ item.equName }}</span></view>
              <view>设备编号 <span class="deviceValue">{{ item.equNo }}</span></view>
            </view>
          </view>
        </uni-card>

      </view>
    </view>

  </view>
</template>

<script>
import { getDeviceDataList } from '@/api/device'

import { geEquList, getDictData, getManageTerminal } from '@/api/manage'

export default {
  data() {
    return {
      terminalList: [],
      show: false,
      queryParams: {
        // pageNo: 1,
        // pageSize: 100,
        regionId: '',
        equName: '',
        equNo: '',
        equType: '',
        terminalId: '',
      },
      deviceList: [],
      status: 1, // 判断设备状态标签背景展示 1为正常 2为离线  3未激活
      statusList: [
        { label: '未激活', color: '#E1E1E1', textColor: '#8E8E8E', value: 1 },
        { label: '在线', color: '#D5EFE7', textColor: '#74CDAF', value: 2 },
        { label: '离线', color: '#E1E1E1', textColor: '#8E8E8E', value: 3 },
      ],
      deviceTypeList: []
    }
  },
  onLoad(query) {
    const { areaId } = query
    this.queryParams.regionId = areaId
    this.geEquList()
    this.getDictData()
    this.getTerminalList()
  },
  onShow() {
    //⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
    // uni.hideTabBar({
    //   animation: false
    // })
  },
  methods: {
    toDeviceDetail(device) {
      console.log('点击跳转设备详情', device)
      const selectData = JSON.stringify(device)
      uni.navigateTo({ url: `/subpack_Manage_Device/device/deviceDetail?selectData=${selectData}` })
    },
    resetQueryParams() {
      this.queryParams = {
        // regionId: '',
        ...this.queryParams,
        equName: '',
        equNo: '',
        equType: '',
        terminalId: '',
      }
      this.geEquList()

    },
    /** 获取终端设备列表 */
    async getTerminalList() {
      // const { data: { data } } = await getTerminalList(this.queryParams)
      // this.terminalList = data.records

      getManageTerminal(this.queryParams).then(({ data }) => {
        this.terminalList = data.data.map(item => {
          return { value: item.terminalId, text: item.terminalName }
        })
      })
    },
    onConfirm() {
      this.geEquList()
      console.log(this.queryParams, '查询参数')
    },
    /** 获取设备类型字典列表 */
    async getDictData() {
      const res = await getDictData({ dictId: '1643892429729845249', pageNo: 1, pageSize: 100 })
      this.deviceTypeList = res.data.result.records.map(item => {
        return { value: item.itemValue, text: item.itemText }
      })
    },
    onClose() { },
    goToBack() {
      uni.navigateBack()
    },
    async geEquList() {
      const { data: { data } } = await geEquList(this.queryParams)
      this.deviceList = data
      console.log(data, '测试')

    },
    todetail(item) {
      this.$tab.navigateTo(`/subpack_TerminalDevice/device/detail/index?equNo=${item.equNo}&equName=${item.equName}&equType_dictText=${item.equType_dictText}&status=${item.status}&terminalName=${item.terminalName}&impExp_dictText=${item.impExp_dictText}`)
    }
  }
}
</script>

<style lang="scss">
.container {
  // height: calc(100vh - 220rpx);
  height: 100vh;
  // overflow: scroll;
  .top-bg {
    width: 100%;
    height: 330rpx;
    background: #2769f7;
    border-radius: 0rpx 0rpx 140rpx 140rpx;
    padding-top: 104rpx;
    text-align: center;
    font-weight: 600;
    font-size: 40rpx;
    color: #ffffff;
    letter-spacing: 4rpx;
    position: relative;
    ::v-deep .van-popup {
      overflow: initial !important;
    }
    .rowStyle {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #4a4a4a;
      display: flex;
      border-bottom: 1rpx solid #ebebeb;
      margin: 0 36rpx;
      align-items: center;
      height: 80rpx;
      .label {
        // flex: 1;
        width: 142rpx;
        white-space: nowrap;
        margin-right: 30rpx;
        text-align: left;
      }
      .uni-select__input-text {
        font-weight: 400 !important;
        letter-spacing: 0;
      }
      .uni-input {
        // width: 100%;
        // padding: 0 7rpx;
        text-align: left;
        font-size: 28rpx !important;
        font-weight: 400;
        font-family: UICTFontTextStyleBody;
      }
      ::v-deep .uni-select {
        border: 0 !important;
        text-align: left;
        .uni-select__input-placeholder {
          font-size: 28rpx !important;
          font-family: UICTFontTextStyleBody;
          font-weight: 400;
        }
      }
    }
    ::v-deep .van-dropdown-menu__item {
      background: #2769f7;
      justify-content: flex-start;
      color: #fff;
      padding-left: 16rpx;
      .van-dropdown-menu__title {
        color: #fff;
      }
    }
    ::v-deep .uni-data-select {
      width: 100%;
    }
    ::v-deep .uni-select__selector {
      color: #4a4a4a;
    }
    ::v-deep .listContent-device {
      height: calc(100vh - 280rpx);
      overflow-y: scroll;
      margin-top: -20rpx;
    }
    // .dorpdownClass {
    //   background: transparent;
    //   box-shadow: none !important;
    //   padding-left: 30rpx;
    //   height: auto;
    //   margin-bottom: 16rpx;
    //   margin-top: 16rpx;
    //   text-align: left;
    //   font-family: PingFang-SC, PingFang-SC;

    //   ::v-deep .van-dropdown-menu__item {
    //     flex: 0 1 auto !important;
    //     padding: 10rpx 26rpx;
    //     border-radius: 34rpx;
    //     background: #f2f6f7;
    //     margin-right: 16rpx;
    //   }
    //   ::v-deep .van-dropdown-menu__title {
    //     font-size: 24rpx;
    //     color: #989898;
    //     line-height: 34rpx;
    //   }
    // }
    .return {
      position: absolute;
      left: 32rpx;
      margin-top: 8rpx;
    }
    .headFilter {
      color: #ffffff;
      line-height: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      text-align: left;
      padding: 38rpx;
      padding-bottom: 22rpx;
      .filterPng {
        width: 30rpx;
        height: 27rpx;
        margin-right: 6rpx;
        vertical-align: middle;
      }
    }
  }
  ::v-deep.uni-card {
    border-radius: 20rpx !important;
    .uni-body {
      padding: 0 !important;

      .deviceInfo {
        font-size: 24rpx;
        // color: rgba(0,0,0,0.7);
        color: #989898;
        line-height: 60rpx;
        padding-bottom: 20rpx;
        text-align: left;
        margin-left: 32rpx;
        letter-spacing: 0;
        .deviceValue {
          color: #4a4a4a;
          margin-left: 16rpx;
        }
      }
    }
  }
  .terminalTitle {
    // padding-bottom:16rpx;
    display: flex;
    margin-top: 16rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    color: #4a4a4a;
    width: 100%;
    justify-content: space-between;
    // border-bottom: 1rpx solid rgba(0,0,0,0.05);
    .textTitle {
      font-size: 28rpx;
      letter-spacing: 0;
    }
    .impExpIcon {
      width: 24rpx;
      height: 24rpx;
      margin: 0 24rpx 0 12rpx;
      vertical-align: middle;
    }
    .headerIcon {
      display: inline-block;
      width: 8rpx;
      height: 20rpx;
      background: #2769f7;
      border-radius: 6rpx;
      opacity: 0.6;
      margin: 0 14rpx;
    }
    .statusTag {
      width: 87rpx;
      height: 34rpx;
      display: inline-block;
      background-repeat: no-repeat;
      background-size: 87rpx 34rpx;
      font-size: 20rpx;
      color: #ffffff;
      line-height: 34rpx;
      text-align: center;
      padding-left: 8rpx;
      margin-left: 16rpx;
      vertical-align: middle;
    }
    .statusBgNormal {
      background-image: url('');
    }
    .statusUnonline {
      background-image: url('');
    }
    .statusNoClick {
      background-image: url('');
    }
    .statusBgAbnormal {
      background-image: url('');
    }
  }
}
</style>